<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.wrap{display:flex;}*/
       .left,.right{with:200px;padding:10px;display: table-cell;}
       .left{background-color: red;}.right{background-color: blue;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        left
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        left
    </div>
    <div class="right">
        right
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        right
    </div>
    <!--方法一：给等高的两个框使用display: table-cell-->
    <!--方法二：给等高两个框的父元素使用display:flex-->
</div>
</body>
</html>